doctype html
head
    meta(charset='utf-8')
    style.
        .container {
            width: 80%;
            margin: auto;
        }

        form {
            border:1px solid grey;
            padding:20px;
            width:50%;
        }

        img{
            max-width: 95%;
        }

        .center{
            display: table;
            margin: auto;
        }

        input {
            margin-bottom: 10px;
            width: 300px;
        }

        .col-lg-1 {
            width: 10%;
            float: left;
        }
        .col-lg-6{
            width:50%;
            float:left;
        }

        .row{
            clear:both;
        }

        .element01 {
            width: 100%;
        }

        .element02 {
            color: #00f;
            background-color: #ddd;
        }

        .element03 {
            color: #00f;
        }

        .element04 {
            background-color: #ddd;
        }

        .element05 {
            border: 2px dotted #00f;
        }

        .element06 {
            border: none;
        }

        .element07 {
            font-family: "Courier New", Courier;
        }

        .element08 {
            font-size: 2em;
        }

        .element09 {
            font-size: 0.5em;
        }

        .element10 {
            font-weight: bold;
        }

        .element11 {
            padding: 1em;
        }

        .element12 {
            margin: 1em;
        }

        .element13 {
            text-align: right;
        }

        .element14 {
        }

        .element15 {
            line-height: 3em;
        }

        .element16 {
            height:3em;
            line-height: 3em;
        }

        .element17 {
            border-radius: 2em;
        }

        .element18 {
        }

        select{
            width:50%;
            height:34px;
        }
body
    .container
        .row
            include main.jade
        .row
            form.center
                h2 Input几种样式集合。默认width：300px
                h3 当前浏览器:
                input.element01(value='element01 : width:100%;')
                br
                input.element02(value='element02 : color:blue;background-color: #ddd;')
                br
                input.element03(value='element03 : color:#00f;')
                br
                input.element04(value='element04 : background-color: #ddd;')
                br
                input.element05(value='element05 : border: 2px dotted #00f;')
                br
                input.element06(value='element06 : border: none;')
                br
                input.element07(value='element07 : font-family: "Courier New", Courier;')
                br
                input.element08(value='element08 : font-size: 2em;')
                br
                input.element09(value='element09 : font-size: 0.5em;')
                br
                input.element10(value='element10 : font-weight: bold;')
                br
                input.element11(value='element11 : padding: 1em;')
                br
                input.element12(value='element12 : margin: 1em;')
                br
                input.element13(value='element13 : text-align: right;')
                br
                input.element14(value='element14 默认选中效果')
                br
                input.element15(value='element15 line-height: 3em;')
                br
                input.element16(value='element15 height:3em;line-height: 3em;')
                br
                input.element17(value='element17 border-radio:2em;')
                br
                input.element18(placeholder='element17 placeholder')
        .row
            br
            br
            br
            .col-lg-6
                .dropdown-left
                    select
                        option(value='chrome40') chrome 40
                        option(value='firefox36') firefox 36
                        option(value='opera28') opera 28
                        option(value='ie7') ie 7
                        option(value='ie8') ie 8
                        option(value='ie9') ie 9
                        option(value='ie10') ie 10
                        option(value='ie11') ie 11
                    .content
                        p chrome 40:
                        img(src='img/input/chrome40.png')

            .col-lg-6.center
                .dropdown-right
                    select
                        option(value='chrome40') chrome 40
                        option(value='firefox36') firefox 36
                        option(value='opera28') opera 28
                        option(value='ie7') ie 7
                        option(value='ie8') ie 8
                        option(value='ie9') ie 9
                        option(value='ie10') ie 10
                        option(value='ie11') ie 11
                    .content
                        p chrome 40:
                        img(src='img/input/chrome40.png')

    script(src='../bower_components/jquery/dist/jquery.js')
    script.
        $('select').on('change', function(){
            var name = $(this).find("option:selected").val();
            var $content = $('.content', $(this).parent())
            $('p', $content).html(name);
            $('img', $content).attr('src', 'img/input/'+name+'.png');
        })

        $('.selectEle').on('click', function () {
            var name = $(this).attr('data');
            location.href = location.href.substring(0, location.href.lastIndexOf("/") + 1) + name + ".html";
        })
